<template>
  <div class="history-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <span class="arrow">&lt;</span>
      </div>
      <h1 class="title">历史浏览</h1>
    </div>

    <!-- 空状态内容 -->
    <div class="empty-content">
      <img src="/public/icons/history-empty.png" alt="空历史" class="empty-image" />
      <p class="empty-text">当前还没有足迹哦~</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 返回上一页
const goBack = () => {
  router.back();
};
</script>

<style scoped>
/* 页面整体样式 */
.history-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

/* 顶部导航栏 */
.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

/* 返回按钮 */
.back-button {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 返回箭头 (纯CSS实现) */
.arrow {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 标题 */
.title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

/* 空状态内容 */
.empty-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 空状态图片 */
.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
}

/* 空状态文字 */
.empty-text {
  font-size: 16px;
  color: #666;
  text-align: center;
}
</style>